<template>
    <div class="content-wrapp">
        <v-form @submitForm="submitForm" ref="form"></v-form>
        <el-row class="back" :gutter="10" v-loading="loading">
            <el-col :span="8" v-if="findTable">
                <v-progress :progress="findTable"></v-progress>
            </el-col>
            <el-col :span="16" v-if="findTable">
                <v-charts :reviewByTime="findTable.reviewByTime"></v-charts>
            </el-col>
        </el-row>
        <v-table :formData="formData" @columns="columns"></v-table>
    </div>
</template>
<script>
import vProgress from "./progress.vue";
import vCharts from "./charts.vue";
import vTable from "./table.vue";
import vForm from "./form.vue";
const ERR_OK = 200;
export default {
    data() {
        return {
            formData: {},
            findTable: "",
            loading: false
        };
    },
    created() {
        this.getTable(this.formData);
    },
    methods: {
        submitForm(val) {
            this.getTable(val);
            this.formData = JSON.parse(JSON.stringify(val));
        },
        getTable(val) {
            this.findTable = "";
            this.loading = true;
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.reviewMonitoringService +
                    "/reviewSearch/findTable",
                data: val
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    let data = res.data.data;
                    data.reviewByTime.reverse();
                    this.findTable = data;
                }
                this.loading = false;
            });
        },
        columns(val) {
            this.$refs.form.columns(val);
        }
    },
    components: {
        vProgress,
        vCharts,
        vTable,
        vForm
    }
};
</script>
<style lang="stylus" scoped>
.back {
    padding: 10px 5px;
    margin: 0 0 10px 0 !important ;
    background: #ebeef5;
}
</style>